import React from 'react'
import { useState } from 'react'
import '../Item/index.css'
export default function Item({ todo, done, id, setTodoList, todoList }) {

  const [isActive, setIsActive] = useState(false)
  //鼠标移入移出事件
  const mouseHandle = (boolean) => {
    return () => {
      setIsActive(boolean)
    }
  }
  //多选框触发改变事件
  const checkChangeHandle = (e) => {
    const newTodoList = todoList.map(item => {
      if (item.id === id) {
        item.done = e.target.checked
      }
      return item
    })
    setTodoList(newTodoList)
  }

  //删除逻辑
  const deleteHandle = () => {
    const newTodoList = todoList.filter(item => {
      return item.id !== id
    })
    setTodoList(newTodoList)
  }

  return (
    <li onMouseEnter={mouseHandle(true)}
      onMouseLeave={mouseHandle(false)}
      className={isActive ? 'active' : ''}
    >
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button onClick={deleteHandle} className="btn btn-danger" style={{ display: isActive ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
